import React, {useEffect, useState} from 'react';
import type {Dayjs} from 'dayjs';
import type {BadgeProps, CalendarProps, RadioChangeEvent} from 'antd';
import {Badge, Calendar, message, Modal, Radio, Typography} from 'antd';
import './index.css';
import {
  listHolidayStatisticsUsingGET,
  updateHolidayStatisticsUsingPUT
} from "@/services/model/holidayStatisticsController";
import dayjs from "dayjs";

const {Paragraph, Text} = Typography;


const App: React.FC = () => {
  const [isModalOpen, setIsModalOpen] = useState(false);
  // 选中的日期
  const [selectDateValue, setSelectDateValue] = useState<Dayjs>();
  // 选中的内容：节假日、休息、上班
  const [selectKindValue, setSelectKindValue] = useState(1);
  // const [dateList, setDateList] = useState<readonly API.HolidayStatistics[]>();
  const [dateMap, setDateMap] = useState<Map<string, number>>();
  const getListData = (value: Dayjs) => {
    let dateFormat = value.toDate().toISOString().slice(0, 10);
    let listData;
    switch (dateMap?.get(dateFormat)) {
      case 1:
        listData = [
          {type: 'success', content: '休息'}
        ];
        break;
      case 2:
        listData = [
          {type: 'warning', content: '节假日'}
        ];
        break;
      default:
    }
    return listData || [];
  };
  useEffect(() => {
    listHolidayStatisticsUsingGET().then(result => {
      const dateMap: Map<string, number> = new Map<string, number>();
      if (result.code === 0 && result.data) {
        result.data.forEach(item => {
          if (item.qmsDate && item.type !== undefined) {
            dateMap.set(item.qmsDate, item.type)
          }
        })
        setDateMap(dateMap)
      }
    });
  }, [])
  const dateCellRender = (value: Dayjs) => {
    const listData = getListData(value);
    return (
      <ul className="events">
        {listData.map((item) => (
          <li key={item.content}>
            <Badge status={item.type as BadgeProps['status']} text={item.content}/>
          </li>
        ))}
      </ul>
    );
  };

  const cellRender: CalendarProps<Dayjs>['cellRender'] = (current, info) => {
    if (info.type === 'date') return dateCellRender(current);
    return info.originNode;
  };
  const showModal = (value: Dayjs, { source }: any) => {
    if (source === 'date') {
      let dateFormat = value.toDate().toISOString().slice(0, 10);
      setSelectKindValue(dateMap?.get(dateFormat) || 0);
      setSelectDateValue(value)
      setIsModalOpen(true);
    }
  };

  const handleOk = () => {
    if (selectDateValue) {
      let dateFormat = selectDateValue.toDate().toISOString().slice(0, 10);
      updateHolidayStatisticsUsingPUT({type: selectKindValue, qmsDate: dateFormat}).then(res => {
        if (res.code === 0 && res.data) {
          message.success("修改成功")
          listHolidayStatisticsUsingGET().then(result => {
            const dateMap: Map<string, number> = new Map<string, number>();
            if (result.code === 0 && result.data) {
              result.data.forEach(item => {
                if (item.qmsDate && item.type !== undefined) {
                  dateMap.set(item.qmsDate, item.type)
                }
              })
              setDateMap(dateMap)
            }
          });
        }
      })
    }
    setIsModalOpen(false);
  };

  const handleCancel = () => {
    setIsModalOpen(false);
  };

  const onChange = (e: RadioChangeEvent) => {
    setSelectKindValue(e.target.value);
  };
  return <>
    <Modal title="选择类型" open={isModalOpen} onOk={handleOk} onCancel={handleCancel}>
      <Radio.Group onChange={onChange} value={selectKindValue}>
        <Radio value={2}>节假日</Radio>
        <Radio value={1}>休息</Radio>
        <Radio value={0}>无（上班）</Radio>
      </Radio.Group>
    </Modal>
    <Paragraph>
      <b>来料检验完成率（排除节假日/周末）</b> <br/>
      默认所有周六、周日是【休息】<br/>如果想要设置某天是假期，或者由于调休把【休息】修改成【空】，点击你想要设置的『天』
    </Paragraph>
    <Paragraph>
      <ul>
        <li>
          <Text type="success">休息：正常星期（周六、周日）</Text>
        </li>
        <li>
          <Text type="warning">节假日</Text>
        </li>
        <li>
          没有任何标记【正常上班】
        </li>
      </ul>
    </Paragraph>
    <Calendar cellRender={cellRender} onSelect={showModal} defaultValue={dayjs()}/>
  </>;

};

export default App;
